import React, { Component } from 'react'
import styles from './index.module.scss'
import imgB from '../../assets/login-l.cb39a31f.png'
import crmImg from '../../assets/下载.png'
import { Card, Form, Input, Button, Row, Col, message } from 'antd'
import { getCodeApi, loginApi } from '../../api/login'
import { setItem } from 'utils/storage'
export default class Login extends Component {
  // 状态
  state = {
    codeImg: {}, //验证码图片
  }
  componentDidMount() {}
  // 表单提交
  handleSubmit = async (val) => {
    try {
      let res = await loginApi({ ...val, uuid: this.state.codeImg.uuid })
      if (res.msg === '验证码错误') {
        message.error('验证码错误')
        this.getCode()
        return Promise.reject(new Error('验证码错误'))
      }
      message.success('登录成功')
      setItem(res.token)
      this.props.history.push('/home')
    } catch (error) {}
  }
  // 获取验证码
  async getCode() {
    let res = await getCodeApi()

    this.setState({ ...this.state, codeImg: res })
  }
  //页面初始化
  componentDidMount() {
    this.getCode()
  }
  render() {
    return (
      <div className={styles.login}>
        <div className="loginKuan">
          <img src={imgB} alt="" style={{ width: 533, height: 426 }} />
          <Card style={{ width: 300, height: 426 }}>
            {/* 汇客CRM系统 */}
            <p>
              <img src={crmImg} alt="" style={{ width: 33, height: 36 }} />
              汇客CRM系统
            </p>
            {/* 表单 */}
            <Form
              onFinish={this.handleSubmit}
              name="basic"
              className="login-form"
              validateTrigger={['onBlur', 'onChange']}
              initialValues={{
                username: 'admin',
                password: '123456',
                code: null,
              }}
            >
              <Form.Item
                name="username"
                rules={[
                  {
                    required: true,
                    message: '请输入用户名',
                  },
                  {
                    pattern: /^[a-z0-9]+$/,
                    message: '用户名格式不正确',
                  },
                ]}
              >
                <Input placeholder="Username" />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: '密码不能为空',
                  },
                  {
                    pattern: /^[0-9]{6}$/,
                    message: '密码格式不正确',
                  },
                ]}
              >
                <Input.Password placeholder="Password" />
              </Form.Item>

              <Form.Item>
                <Row gutter={8}>
                  <Col span={12}>
                    <Form.Item
                      name="code"
                      rules={[
                        {
                          required: true,
                          message: '请输入验证码',
                        },
                        {
                          pattern: /^\d+$/,
                          message: '验证码格式不正确',
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <div>
                      <img
                        onClick={() => {
                          this.getCode()
                        }}
                        style={{ width: 120, height: 35 }}
                        src={`data:image/jpg;base64,${this.state.codeImg.img}`}
                        alt=""
                      />
                    </div>
                  </Col>
                </Row>
              </Form.Item>
              <Form.Item>
                <Button
                  block
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                >
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    )
  }
}
